<template>
  <div class="comment">
    <div style="margin: 20px 0" v-if="$store.state.user.replay.nickname">
      <el-tag closable @close="close"
        >回复 @{{ $store.state.user.replay.nickname }}</el-tag
      >
    </div>
    <el-input
      type="textarea"
      placeholder="说点什么吧....."
      v-model="textarea"
      maxlength="30"
      show-word-limit
      resize="none"
      ref="input"
    >
    </el-input>
    <div class="sumbit">
      <el-upload
        :action="$axios.defaults.baseURL + '/upload'"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        name="files"
        :on-success="success"
        :on-remove="handleRemove"
        :file-list="fileList"
        ref="imgList"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
      <el-button type="primary" @click="sumbitComment">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textarea: "",
      dialogImageUrl: "",
      dialogVisible: false,
      pics: [],
      //分页数据参数
      start: 0,
      pageSize: 5,
      fileList: []
    };
  },
  watch: {
    "$store.state.user.replay.id"() {
      if (this.$store.state.user.replay.id) {
        this.$refs.input.focus();
      }
    },
  },
  methods: {
    //分页数据刷新
    getActicle() {
      this.$axios({
        url: "/posts/comments",
        method: "get",
        params: {
          post: this.$route.query.id,
          _limit: this.pageSize,
          _start: this.start,
        },
      }).then((res) => {
        this.$store.commit("user/setCommentData", res.data);
      });
    },
    close() {
      this.$store.commit("user/setComment", {});
    },
    //提交评论
    sumbitComment() {


      if (this.$store.state.user.userinfo.token) {
        if (this.$store.state.user.replay.id) {
          this.$axios({
            url: "/comments",
            method: "post",
            data: {
              content: this.textarea,
              pics: this.pics,
              follow: this.$store.state.user.replay.id,
              post: this.$route.query.id,
            },
            headers: {
              "Content-Type": "application/json",
              Authorization:
                "Bearer " + this.$store.state.user.userinfo.token || "no token",
            },
          })
            .then((res) => {
              console.log(res);
              this.textarea = "";
              this.getActicle();
              this.fileList = []
              // this.handleRemove();
              this.$store.commit("user/setComment", {}); //回复完成清空
            })
            .catch((err) => console.log(err));
        } else {
          this.$axios({
            url: "/comments",
            method: "post",
            data: {
              content: this.textarea,
              pics: this.pics,
              post: this.$route.query.id,
            },
            headers: {
              "Content-Type": "application/json",
              Authorization:
                "Bearer " + this.$store.state.user.userinfo.token || "no token",
            },
          })
            .then((res) => {
              console.log(res);
              this.$refs.imgList.clearFiles();
              this.getActicle();
              this.textarea = "";
            })
            .catch((err) => console.log(err));
        }
      } else {
        this.$store.commit("user/setURL", location.href);
        this.$router.push({ path: "/user/login" });
        this.$message.error("请先登录");
      }
    },
    handleRemove(file, fileList) {
      // console.log(file.response[0]);
      this.pics = this.pics.filter((v) => {
        return v.id != file.response[0].id;
      });
      console.log(this.pics);
    },
    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    success(response, file, fileList) {

      this.pics.push(response[0]);

      console.log(this.pics);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-upload-list__item,
.is-success {
  width: 131px;
  height: 131px;
}
/deep/ .el-textarea__inner {
  height: 100px;
}
/deep/ .el-upload--picture-card {
  width: 130px;
  height: 130px;
}
.sumbit {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  /deep/ .el-button--primary {
    align-self: flex-end;
  }
}
</style>